<template>
  <div class="add-menu">
    <el-dialog title="修改菜单" :visible.sync="editFormVisible"  @close="addClose" :before-close="addClose">
        <el-form ref="form" :model="form" size="small" :rules="rules" label-width="100px">
            <el-form-item label="菜单名称:" prop="menuname">
                <el-input v-model="form.menuname" placeholder="请输入菜单名称"></el-input>
            </el-form-item>
            <el-form-item label="菜单URL:">
                <el-input v-model="form.linkpath" placeholder="请输入url(/**/**)"></el-input>
            </el-form-item>
            <el-form-item label="菜单图标:">
                <el-input v-model="form.iconstyle" placeholder="请输入iconfont的类名"></el-input>
            </el-form-item>
            <el-form-item label="是否禁用:" prop="disenable">
                <el-radio v-model="form.disenable" label="0">启用</el-radio>
                <el-radio v-model="form.disenable" label="1">禁用</el-radio>
            </el-form-item>
            <el-form-item label="菜单目标:" prop="menutarget">
                <el-radio v-model="form.menutarget" label="main">默认窗口</el-radio>
                <el-radio v-model="form.menutarget" label="_blank">新开窗口</el-radio>
            </el-form-item>
            <el-form-item label="菜单分类:" prop="menutype">
                <el-radio v-model="form.menutype" label="0">PC</el-radio>
                <el-radio v-model="form.menutype" label="1">APP</el-radio>
            </el-form-item>
            <el-form-item label="优先排序值:" prop="orderindex">
                <el-input v-model="form.orderindex" placeholder="请输入优先排序值"></el-input>
            </el-form-item>
            <div class="add-menu-action">
                <el-button size="mini" @click="addLine">添加行</el-button>
                <el-button size="mini" @click="deleteLine">删除行</el-button>
            </div>
             <el-table
                ref="multipleTable"
                :data="form.childs"
                tooltip-effect="dark"
                border
                @selection-change="handleSelectionChange">
                <el-table-column
                type="selection"
                width="55">
                </el-table-column>
                <el-table-column
                label="字段名称"
                width="120">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.childmenuname" size="mini"></el-input>
                </template>
                </el-table-column>
                <el-table-column label="按钮名称">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.childName" size="mini"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                label="是否显示"
                width="150">
                    <template slot-scope="scope">
                        <el-radio v-model="scope.row.visible" label="1" size="mini">显示</el-radio>
                        <el-radio v-model="scope.row.visible" label="0" size="mini">隐藏</el-radio>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="$emit('update:editFormVisible', false)">取 消</el-button>
            <el-button type="primary" @click="save()">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
    props:["editSubmit","editForm","editFormVisible"],
    data(){
        return {
            // editFormVisible: true,
            form: {
                disenable:'0',
                menuparentid:0,
                menutarget:'main',
                menutype:'0',
                childs:[],
                orderindex:100
            },
            rules:{
                menuname:[
                    { required: true, message: '请输入菜单名称', trigger: 'blur' }
                ],
                iconstyle:[
                    { required: true, message: '请输入图标名称', trigger: 'blur' }
                ],
                disenable:[
                    { required: true, message: '请输入显示状态', trigger: 'blur' }
                ],
                menutarget:[
                    { required: true, message: '请输入目标状态', trigger: 'blur' }
                ],
                orderindex:[
                    { required: true, message: '请输入优先排序值', trigger: 'blur' }
                ],
                menutype:[
                    {required: true, message: '请输入菜单分类', trigger: 'blur'}
                ]
            },
            childItem:{
                childmenuname:'',
                childName:'',
                visible:'0'
            },
            formLabelWidth: '120px',
            tableData3: [],
            multipleSelection: []
        }
    },
    methods:{
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        addLine(){
            this.form.childs.push(_.clone(this.childItem));
        },
        deleteLine(){
            let childs = this.form.childs;
            let selections = this.multipleSelection;
            _.each(selections, items => {
                let index = _.findIndex(childs, items);
                childs.splice(index,1);
                if(items.childid == undefined){
                }else{
                    this.form.ids.push(items.childid);
                }
            });
            this.form.childs = childs;
            this.multipleSelection = [];
            // console.log("我來看看刪除的數據",childs);
        },
        save(){
            this.$refs['form'].validate((valid) => {
                if (valid) {
                   delete this.form.childMenus;
                   this.editSubmit(this.form);
                }else{

                }
            })
        },
        addClose(){
            this.$emit('update:editFormVisible', false)
        }
    },
    mounted(){

    },
    created(){
        this.form = this.editForm;
        this.form.ids = [];
        this.form.disenable = this.form.disenable.toString();
        this.form.menutype = this.form.menutype.toString();
        _.each(this.form.childs, item => {
            item.visible = item.visible.toString();
            //this.form.ids.push(item.childid);
        });
        console.log(this.form);

    }
}
</script>

<style scoped lang="scss">
    .add-menu{
        box-shadow: border-box;
        .el-radio{
            margin-left:0!important;
        }
        &-action{
            padding-bottom:10px;
        }
        .el-table__body-wrapper, .el-table__footer-wrapper, .el-table__header-wrapper{
            width:101%!important;
        }
    }
    *{
        box-shadow: border-box;
    }
</style>
